import styles from './index.module.scss'
import Icons from '../../components/icons/index'
import UserListComponents from '@/components/UserList/UserListComponents';
import FiandUser from '@/components/fiandUser/FiandUser';
import { Outlet, useLocation } from 'react-router-dom';
import useWebSocket from '@/utils/socket'
import { Msg } from '@/modules/chat';
import { useEffect, useState } from 'react';
import { User } from '@/modules/login';
import { message } from 'antd';
import { findFriendAllById } from '@/api/friend/index';
import { UserFriendVo } from '@/modules/friend';
import FiandListComponnts from '@/components/fiandList/FiandListComponnts'
export default function Home() {
  const [list, setlist] = useState<Array<Msg>>([])
  const user = JSON.parse(window.localStorage.getItem('user')!) as User
  const location = useLocation()
  const [page] = useState<number>(1)
  const [pageSize] = useState<number>(10)
  // const [pathInfo, setpathInfo] = useState<string>('')
  const [fiandList, setfiandList] = useState<Array<UserFriendVo>>([])
  //添加好友
  // const outlet = useOutlet()
  const getfiandAll = async () => {
    console.log(user);
    console.log(user.id);
    const res = await findFriendAllById(page, pageSize, user.id,)
    console.log(res);
    setfiandList(res.data.records)
    console.log(fiandList);
  }
  useEffect(() => {
    message.info("路径已跳转:" + location.pathname)
    const pathname = location.pathname
    const pathpop = pathname.split('/').pop()
    message.success(pathpop)
    if (pathpop === 'allfiand') {
      console.log("到了好友界面");
      // setpathInfo(pathpop)
      getfiandAll()

    }

  }, [location.pathname])
  function adduser(evet: Msg) {
    console.log(evet);
    //@ts-ignore
    sendMessage({
      ...evet,
    })
    console.log("被调用");
  }


  /**
   * 拒绝添加好友
   * @param msg 
   */
  const noAddmsg = (event: Msg) => {
    console.log("拒绝了");
    //@ts-ignore
    sendMessage({
      ...event
    })
    console.log(event);
  }



  const [sendMessage,] = useWebSocket({

    // url: `ws://localhost:8080/webSocket/${chainId.data}`,  //这里放长链接
    url: `ws://localhost:8090/`,
    onOpen: () => {
      //连接成功
      console.log('WebSocket 连接成功');
    },
    onClose: () => {
      //连接关闭
      console.log('WebSocket 连接关闭');
    },
    onError: (event) => {
      //连接异常
      console.error('WebSocket 连接异常:', event);
    },
    onMessage: (messageS) => {
      // console.log(message);

      if (messageS) {
        //收到消息

        const msg = JSON.parse(messageS) as Msg
        // console.log(msg);
        if (msg.msgType === 10000) {
          console.log("已成功建立连接");
          return
        }
        //添加好友为100
        if (msg.msgType === 100) {
          console.log("收到添加消息", msg);
          addmsg(msg)
          console.log("收到来自ID为:" + msg.addFromId + "英雄名:" + msg.addNickname + "添加" + msg.toId + "的添加信息" + msg.remark);
        }
        if (msg.msgType === 3) {
          addmsg(msg)
        }
        if (msg.msgType === -100) {
          message.error(msg.addNickname + "拒绝了您的好友请求")
        }
        if (msg.msgType === 101) {
          message.success(msg.addNickname + "同意了您添加好友请求")
        }
      }

    },
  });
  // socket

  //发给子组件更新状态
  const addmsg = (msg: Msg) => {
    // console.log("收到了新消息");
    // setaddMsgstatus(true)
    console.log(msg);
    setlist([...list, msg]);
    console.log(list);
  }





  //删除已经完成的消息
  // const deLMsg = (msgid: string) => {
  //   console.log("删除之前");
  //   console.log(list);
  //   console.log("传过来的id:" + msgid);
  //   list.forEach((e, index) => {
  //     if (e.msgId === msgid) {
  //       list.splice(index, 1)
  //       console.log("删除了");
  //       setlist([...list])
  //       console.log(list);

  //     }
  //   })
  //   console.log(list);

  // }


  return (
    <div className={styles.bj}>
      {/* 左边 */}
      <Icons></Icons>
      {/* 中间开始 */}
      <div className={styles.min}>
        {/* 查找好友 */}
        <div className={styles.fianduser}>
          {/* 查找组件 */}
          <FiandUser adduser={adduser}></FiandUser>
        </div>
        {/* 好友列表 */}
        <div className={styles.userlist}>
          {

            location.pathname.split('/').pop() === `allfiand` ? <FiandListComponnts fiandList={fiandList}></FiandListComponnts> :
              <UserListComponents list={list} noAddmsg={noAddmsg} ></UserListComponents>
          }
        </div>
        {/* 中间结束 */}
      </div>
      {/* 聊天开始 */}
      <div className={styles.right}>

        <Outlet />

        {/* 聊天框结束 */}
      </div>
    </div>
  )
}
